<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en"  xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">

<div th:replace="~{commons/template::style}"></div>

<title>学期选课</title>
	</head>

	<body>
		<div th:replace="commons/template::head"></div>

		<div class="container-fluid">
			<div class="row">
				<div th:replace="commons/template::leftSide(active='chooseCourse')"></div>

				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<h2 th:if="${info}!=null">学期选课</h2>
					<button th:if="${info}!=null" type="button" class="btn btn-info" th:value="${info[0].getStuId()}" id="chooseBtn">开始选课</button>
					<h2 th:if="${info}==null">对不起！您不是学生，无法选课！</h2>
					<div class="table-responsive">
						<table class="table table-striped table-sm">
							<thead>
								<tr th:if="${info}!=null">
									<th>您的学号</th>
									<th>课程ID</th>
									<th>已选课程</th>
									<th>开课学年</th>
									<th>开课学期</th>
									<th>功能</th>
								</tr>
							</thead>
							<tbody id="t1">
								<tr th:each="choose:${info}">
									<td th:text="${choose.getStuId()}"></td>
									<td th:text="${choose.getCourseId()}"></td>
									<td th:text="${choose.getCourseName()}"></td>
									<td th:text="${choose.getYearName()}" th:name="${choose.getYearId()}"></td>
									<td th:text="${choose.getChooseTerm()==1?'第一学期':'第二学期'}"></td>
									<td>
										<input type="button" class="btn btn-danger" value="取消选课" th:name="${choose.getChooseId()}" th:disabled="${choose.getCourseId()}==0?'true':'false'" >
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</main>
			</div>
		</div>
		<!-- 模态框 -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<form id="form">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title">选课</h5>
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						</div>
						<div class="modal-body" id="content">
							<tr>
								<td>
									<mark>您的ID：</mark>
									<h6 id="stuId"></h6>
								</td>
							</tr>
							<tr>
								<td>
									<mark id="yearIdName">学年：</mark>
									<select id="yearId" onchange="getCourse()">
									</select>
								</td>
							</tr>
							<tr>
								<td align="center">
									<mark id="courseIdName">课程：</mark>
									<select id="courseId" onchange="refreshSaveBtn()">
									</select>
								</td>
							</tr>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal" id="close">关闭</button>
							<button type="button" class="btn btn-primary" id="save" onclick="sav()">保存</button>
						</div>
					</div><!-- /.modal-content -->
				</form>
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->

		<div th:replace="~{commons/template::script}"></div>

	</body>
<script>
	$("#chooseBtn").click(function () {
		$("#stuId").html($(this).val())
		$.ajax({
			url:"getYear",
			data:{},
			dataType:"json",
			type:"get",
			async:false,
			success:function (returnData) {
				$("#yearId").html("");
				$("#yearId").append("<option value=''>--选择学年--</option>")
				for (var i=0;i<returnData.length;i++){
					$("#yearId").append("<option value='"+returnData[i].yearId+"'>"+returnData[i].yearName+"</option>");
				}
			}
		})
		$("#myModal").modal('show');
	})
	function getCourse() {
		$.ajax({
			url:"selectCourseByYearId",
			data: {yearId:$("#yearId").val()},
			dataType: "json",
			type: "get",
			success:function (course) {
				$("#courseId").html("");
				$("#courseId").append("<option value=''>--选择课程--</option>");
				for (var i = 0; i < course.length; i++) {
					$("#courseId").append("<option value='" + course[i].courseId + "'>" + course[i].courseName + "</option>");
				}
			}
		})
	}
	function sav(){
		$.ajax({
			url:"saveChoose",
			data:{yearId:$("#yearId").val(),
			      courseId:$("#courseId").val()},
			dataType:"json",
			type:"post",
			success:function (message) {
				alert(message.message)
				if (message.state){
					window.location.href="http://localhost:8080/chooseRequest";
				}else {
					$("#save").attr("disabled","disabled");
				}
			}
		})
	}
	function refreshSaveBtn(){
		$("#save").removeAttr("disabled");
	}
	$("#t1").on("click","input[value='取消选课']",function () {
		$.ajax({
			url:"delChoose",
			data:{chooseId:this.name},
			dataType:"json",
			type:"get",
			success:function (message) {
				alert(message.message);
				window.location.href="http://localhost:8080/chooseRequest";
			}
		})
	})
</script>
</html>